<template>
  <el-dialog :title="title" center  :visible.sync="openState" :close-on-click-modal="false" width="1024px" append-to-body>
    <div class="discountReceipt-pick-operate-box">
      <div class="operate-box-top">
        <Ht-search-form
          :defaultEventKey="defaultSearchKey"
          :dictMap="dictMap"
          :queryParams="queryParams"
          :outputQueryParams="queryParams"
          :formOptions="formOptions"
          :advOptions="[]"
          :labelWidth="110"
        ></Ht-search-form>
      </div>
      <div class="operate-box-bottom">
        <div class="bottom-content">
          <ht-table
            :defaultEventKey="defaultSearchKey"
            ref="dataTable"
            rowKey="bankCode"
            :showSerialNumber="false"
            :multi-select="false"
            :dictMap="dictMap"
            :initData="false"
            :reqConfig="reqConfig"
            :queryParams="queryParams"
            :tableBindColumns="tableBindColumns"
            :showRightToolbar="false"
          >
            <template v-slot:operate>
              <el-table-column
                label="操作"
                align="center"
                fixed="left"
                width="120"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <ht-button-group
                    :buttonList="[
                      {
                        label: '选择',
                        doFunc: () => {
                          confirm(scope.row);
                        },
                      },
                    ]"
                  />
                </template>
              </el-table-column>
            </template>
          </ht-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { payCodeQuerySearch } from "@/api/cnaps/bepsDraft/client_pay_pact_manage_entry";
export default {
  name: "BankBranchDialog",
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    initData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      title: "入网机构和费项关系信息表查询",
      openState: false,
      defaultSearchKey: "cnapsBankSearch-dialog",
      // 来源标识 为了服用区分是哪个选项触发的
      fromFlag: "",
      tableLoadingState: false,
      formOptions: [],
      queryParams: {
        acsOrgId: "",
        acsOrgName: "",
        regionid: "",
      },
      reqConfig: payCodeQuerySearch,
      tableBindColumns: [
        { label: `地域标识`, prop: "regionid", width: 150, dictCode: "RegionId" },
        { label: `统一社会信用代码`, prop: "acsOrgId", width: 180 },
        { label: `入网机构名称`, prop: "acsOrgName", width: 170 },
        { label: `费项代码`, prop: "payCode", width: 180 },
        { label: `费项名称`, prop: "payName", width: 180 },
      ],
      refName: "",
    };
  },
  mounted() {
    const formOptions = [
      {
        type: "dict",
        dict: "RegionId",
        prop: "payCode",
        defaultAttr: {
          size: "small",
          label: "费项代码",
          placeholder: "请选择费项代码",
        },
      },
      {
        type: "dict",
        dict: "RegionId",
        prop: "regionid",
        defaultAttr: {
          size: "small",
          label: "地域标识",
          placeholder: "请选择地域标识",
        },
      },
      {
        type: "input",
        prop: "acsOrgId",
        defaultAttr: {
          size: "small",
          label: "统一社会信用代码",
          placeholder: "请输入统一社会信用代码",
        },
      },
    ];
    this.formOptions = formOptions;
  },
  watch: {
    openState(d) {
      if (d) {
        this.$nextTick(() => {
          this.$set(this.queryParams, "regionid", this.initData.regionid);
          this.$set(this.queryParams, "acsOrgId", this.initData.uniformScCode);
          this.$refs.dataTable.doQuery();
        });
      }
    },
  },
  methods: {
    show(fromFlag = "", refName = "") {
      this.openState = true;
      this.fromFlag = fromFlag;
      this.refName = refName;
    },
    close() {
      this.openState = false;
    },
    loadData() {},
    // 点击确认数据
    confirm(row) {
      this.$emit("confirm", this.fromFlag, row, this.refName);
      this.openState = false;
    },
  },
};
</script>
<style scoped></style>
